<template>
    <div class="draggable" style="padding: 20px">
        <el-table
                row-key="id"
                :data="tableData"
                style="width: 100%"
				:show-header="showHeader"
                border
        >
            <el-table-column
                    v-for="(item,index) in oldList"
                    :key="`col_${index}`"
                    :prop="newList[index].prop"
                    :label="item.label"
                    align="center"
            >
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import Sortable from 'sortablejs';
 
    export default {
        mounted() {
            this.oldList = JSON.parse(JSON.stringify(this.tableConfig.tableItems))
            this.newList = JSON.parse(JSON.stringify(this.tableConfig.tableItems))
            this.cellDrop()
            //this.rowDrop()
        },
        data() {
            return {
			    showHeader:false,
                oldList: [],
                newList: [],
                tableData: [
                    {
                        id:1,
                        name:'李一',
                        gender:'男',
                        age:30,
                        job:"会计"
                    },
                    {
                        id:2,
                        name:'王二',
                        gender:'未知',
                        age:18,
                        job:"无业游民"
                    },
                    {
                        id:3,
                        name:'张三',
                        gender:'男',
                        age:50,
                        job:"老板"
                    },
                ],
                tableConfig: {
                    tableItems: [
                        {
                            label: '姓名',
                            prop: 'name',
                        },
                        {
                            label: '性别',
                            prop: 'gender',
                        },
                        {
                            label: '年龄',
                            prop: 'age',
                        },
                        {
                            label: '工作',
                            prop: 'job',
                        },
                    ]
                }
            }
        },
        methods: {
            // 行拖拽
            rowDrop() {
                // 此时找到的元素是要拖拽元素的父容器
                const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody');
                const _this = this;
                Sortable.create(tbody, {
                    //  指定父元素下可被拖拽的子元素
                    draggable: ".draggable .el-table__row",
                    onEnd({newIndex, oldIndex}) {
                        const currRow = _this.tableData.splice(oldIndex, 1)[0];
                        _this.tableData.splice(newIndex, 0, currRow);
                    }
                });
            },
            // 单元格拖拽
            cellDrop() {
                const wrapperTr = document.querySelectorAll('.draggable .el-table__body-wrapper .el-table__row');
				var i;
                for (i = 0; i < wrapperTr.length; i++) {
                 this.sortable = Sortable.create(wrapperTr[i], {
                    animation: 180,
                    delay: 0,
					draggable: ".draggable .el-table__row td",
                    onEnd: evt => {
					    console.log('oldIndex:'+evt.oldIndex+',newIndex:'+evt.newIndex);
                        const oldItem = this.newList[evt.oldIndex];
                        this.newList.splice(evt.oldIndex, 1);
                        this.newList.splice(evt.newIndex, 0, oldItem);
                    }
                });
                }
                
            }
        }
    }
</script>
<style scoped>
</style>